<template>
  <div class="div_box">
    <h1 id="h1">UNL-ADMIN</h1>
    <el-form
      :model="ruleForm"
      status-icon
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      id="from"
    >
      <el-form-item label="用户名">
        <el-input type="next" v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="edit" id="edit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        password: "",
        username: "",
      },
    };
  },
  methods: {
    //登录
    edit() {
      this.$axios
        .post("http://ceshi5.dishait.cn/admin/login", {
          password: this.ruleForm.password,
          username: this.ruleForm.username,
        })
        .then((res) => {
          console.log(res);
          if (res.data.msg == "ok") {
            localStorage.setItem("token", res.data.data.token);
            this.$message({
              message: "登录成功",
              type: "success",
            });
            this.$router.push({path:'/Home'})
          }
        })
        .catch((error) => {
          this.$message({
            message: "登录失败",
            type: "warning",
          });
        });
    },
  },
};
</script>


<style lang="scss">
    .div_box{
        width: 600px;
        margin: 100px auto;
        border: 1px solid gainsboro;
    }
    #h1{
      width: 100%;
      text-align: center;
      border: 1px solid gainsboro;
    }
    #edit{
      width: 100%;
    }
    #from{
      margin-top: 10px;
      margin-right: 80px;
    }
</style>